<template>
  <div>
    <input type="text" v-model="keyword" />
    <transition-group
      tag="ul"
      name="pengfan"
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <li v-for="(item, index) in showNames" :key="index" :data-index="index">
        {{ item }}
      </li>
    </transition-group>
  </div>
</template>

<script>
import gsap from "gsap";
export default {
  data() {
    return {
      names: [
        "pengfan",
        "pengyutong",
        "xiagou",
        "lixin",
        "chenxin",
        "weiyongpeng",
      ],
      keyword: "",
    };
  },
  computed: {
    showNames() {
      return this.names.filter((item) => item.indexOf(this.keyword) !== -1);
    },
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.height = 0;
    },
    enter(el, done) {
      console.log("----------->1");
      gsap.to(el, {
        opacity: 1,
        height: "1.5em",
        delay: el.dataset.index * 0.2,
        onComplete: done,
      });
    },
    leave(el, done) {
      console.log("----------->2");
      gsap.to(el, {
        opacity: 0,
        height: 0,
        delay: el.dataset.index * 0.2,
        onComplete: done,
      });
    },
  },
};
</script>

<style scoped>
/* .pengfan-enter-from,
.pengfan-leave-to {
  opacity: 0;
}

.pengfan-enter-active,
.pengfan-leave-active {
  transition: opacity 1s ease;
} */
</style>